import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import {Button} from 'antd'
import PropTypes from 'prop-types'

import css from './advanced_search.css'
import angle from './angle.png'

class AdvancedSearch extends Component {

  constructor(props) {
    super(props)
    this.state = {
      open: false
    }
  }

  close = () => {
    this.setState({open: false})
  }
  open = () => {
    this.setState({open: true})
  }

  search = (e) => {
    let rtn;
    this.props.onSearch && (rtn = this.props.onSearch());
    if (rtn !== false)
      this.close();

      console.log(this);
  }

  componentDidMount = ()=> {
    document.addEventListener('click', (e) => {
      const {sch} = this.refs
      sch && !sch.contains(e.target) && this.close()
    })
  }

  render() {
    return (
      <div style={this.props.style} ref="sch" className={css.advanced_search}>
        <Button onClick={this.open}>高级搜索</Button>
        {this.state.open && <div style={{width:this.props.width}} className={css.search_content_wrapper}>
          <img src={angle} className={css.angle}/>
          <div className={css.search_content}>
            <div className={css.search_children}>
              {this.props.children}
            </div>
            <div className={css.foot}>
              <Button className={css.foot_btn} type="primary" onClick={this.search}>搜索</Button>
            </div>
          </div>
        </div>}
      </div>
    )
  }
}

AdvancedSearch.propTypes = {
  onSearch: PropTypes.func,
  style: PropTypes.any,
  width:PropTypes.number
};

export default AdvancedSearch;
